<template>
  <view class="home-conatiner">
    <view>
      <view class="role-item">
        <view class="role-left">
          HI, {{ user.profile.nickname }}
        </view>
      </view>
			<view class="swiper-wrap common-card">
				<swiper class="swiper" circular :indicator-dots='true' :autoplay="autoplay" :interval="interval"
					:duration="duration" indicator-color="#999" indicator-active-color="#fff">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<view class="swiper-item">
							<image :src="item" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
      <view class="home-main">
        <Business :user="user"></Business>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import Business from './components/Business.vue';
import { useUserStore } from '@/store/user';
const user = useUserStore();

const autoplay = true;
const interval = 1500;
const duration = 50;

const swiperList = ref([
  '/static/banner/banner1.png',
  '/static/banner/banner2.png'
])
</script>

<style lang="scss" scoped>
.home-conatiner {
  height: calc(100vh - 1px);
  width: 100%;
  background: linear-gradient(to bottom, #1ab394, #f3f3f4, #f0f0f1);
  padding: 10px;
  box-sizing: border-box;
  padding-bottom: 0;
}

.role-item {
  color: #fff;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  height: 40rpx;
  padding-bottom: 20rpx;
  margin-bottom: 10rpx;

  .role-right {
    // width: 44rpx;
    display: flex;
    align-items: center;
    position: relative;

    image {
      width: 44rpx;
      height: 44rpx;
      display: flex;
      margin-left: 30rpx;
    }

    &>image:first-child {
      width: 38rpx;
      height: 38rpx;
    }
  }
}

::-webkit-scrollbar {
		display: none;
		/* 隐藏滚动条 */
	}

	::-webkit-scrollbar-thumb {
		display: none;
		/* 隐藏滚动条 */
	}

	::-webkit-scrollbar-track {
		display: none;
		/* 隐藏滚动条 */
	}


	.swiper-wrap {
		margin-top: 30rpx;
		width: 100%;
		overflow: hidden;
	}

	.common-card {
		margin-bottom: 10rpx;
		background-color: #fff;
	}

	.swiper {
		height: 380rpx;
	}

	.swiper-item {
		display: block;
		height: 380rpx;
		line-height: 380rpx;
		text-align: center;

		image {
			height: 100%;
			width: 100%;
		}
	}

.home-main {
  height: calc(100% - 60rpx);
  box-sizing: border-box;
  padding-top: 10rpx;
  overflow-y: auto;

  &::-webkit-scrollbar {
    display: none;
    /* 针对 Chrome、Safari 和新版 Edge 隐藏滚动条 */
  }
}
</style>